body {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: aliceblue;
  gap: 10px;
  padding: 50px;
}

.wrap {
  display: flex;
  gap: 10px;
  .d {
    width: 100px;
    height: 100px;
    outline: 1px dashed;
    overflow: hidden;
    &.d1 {
      background: conic-gradient(
        from -45deg,
        royalblue 90deg,
        transparent 0deg
      );
    }
    &.d2-1 {
      background: conic-gradient(
          from 30deg at 0 50%,
          transparent 120deg,
          royalblue 0deg
        ),
        conic-gradient(from 30deg, royalblue 120deg, transparent 0deg);
      background-size: 40px 60px;
      background-position: 20px 50%, -20px 50%;
      background-repeat: repeat-x;
    }
    &.d2 {
      background: conic-gradient(
          from 30deg at 0 50%,
          transparent 120deg,
          royalblue 0deg
        ),
        conic-gradient(from 30deg, royalblue 120deg, transparent 0deg);
      background-size: 40px 60px;
      background-position: 20px 50%, -20px 50%;
    }
    &.d3 {
      background: conic-gradient(royalblue 90deg, transparent 0deg);
    }
    &.d4-1 {
      background: conic-gradient(
        from -90deg at 20px 20px,
        royalblue 90deg,
        transparent 0deg
      );
      background-size: calc(100% - 20px) calc(100% - 20px);
    }
    &.d4 {
      background: conic-gradient(
        royalblue 90deg,
        transparent 0deg 180deg,
        royalblue 180deg 270deg,
        transparent 0deg
      );
      background-size: 20px 20px;
    }
    &.d5 {
      background: conic-gradient(
        from -90deg at 10px 4px,
        royalblue 90deg,
        transparent 0deg
      );
      background-size: 30px 30px;
    }
    &.d6 {
      background: conic-gradient(
          from -90deg at 10px 4px,
          royalblue 90deg,
          transparent 0deg
        ),
        conic-gradient(
          from -90deg at 4px 10px,
          royalblue 90deg,
          transparent 0deg
        );
      background-size: 30px 30px;
      background-position: 0 3px, 3px 0;
    }
    &.d7 {
      background: conic-gradient(
          from -90deg at 20px 8px,
          royalblue 90deg,
          transparent 0deg
        ),
        conic-gradient(
          from -90deg at 8px 20px,
          royalblue 90deg,
          transparent 0deg
        );
      background-position: -10px -4px, -4px -10px;
    }
    &.d8 {
      background: conic-gradient(
          from -45deg at 10px 10px,
          royalblue 90deg,
          transparent 0deg
        ),
        conic-gradient(
          from 135deg at left 10px bottom 10px,
          royalblue 90deg,
          transparent 0deg
        );
      background-position: -10px 0;
    }
  }
}
